/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable no-unused-vars */
/* eslint-disable react/no-unused-prop-types */
import React, {FC, useEffect, useMemo, useState} from 'react'
import {useLocation} from 'umi'
import {Modal, Table, Pagination, message} from 'antd'
import SearchForm from '@/components/SearchForm'
import {commodityList, getOrderType} from '@/service/marketing/commodity'
import {getCarTypeList} from '@/service/carMessage/list'

interface AddVehicleInfoType {
	addModalVisivle: boolean
	setAddModalVisivle: (visible: boolean) => void
	fleetRecord: Record<string, string>
	// eslint-disable-next-line react/require-default-props
	callBack?: () => void
	selectedRow: any
	setSelectedRow: any
	// idArr: any[]
}

// eslint-disable-next-line react/function-component-definition
export const AddVehicleInfoModal: FC<AddVehicleInfoType> = ({
	addModalVisivle,
	setAddModalVisivle,
	callBack,
	selectedRow,
	setSelectedRow,
	// idArr,
}) => {
	const loaction: any = useLocation()
	const [saveLoading, setSaveLoading] = useState(false)
	const [loading, setLoading] = useState(false)
	const [dataList, setDataList] = useState<any[]>([])
	const [pagination, setPagination] = useState({
		current: 1,
		size: 100,
	})
	const [total, setTotal] = useState(0)
	// const [selectedRow, setSelectedRow] = useState<any[]>([])

	const feetId = useMemo(() => loaction?.query?.id, [loaction])
	const [orderType, setOrderType] = useState<any>([])
	const [carTypeList, setCarTypeList] = useState<any>([])

	/** 获取订单类型列表 */
	const getOrderTypeFun = () => {
		getOrderType().then((res: any) => {
			if (res?.success) {
				setOrderType(() => res?.data)
			}
		})
	}

	// 获取品牌车系
	const onCarTypeListFun = () => {
		getCarTypeList().then((res: any) => {
			if (res?.success) {
				const list = res?.data?.map((item: any) => {
					// eslint-disable-next-line no-param-reassign
					item.id = item?.id?.toString()
					return item
				})
				setCarTypeList(() => list)
			}
		})
	}

	// 初始化无条件接口
	useEffect(() => {
		getOrderTypeFun()
		onCarTypeListFun()
	}, [])

	const FleetFormItems: any[] = [
		{
			type: 'group',
			key: 'group1',
			groupItems: [
				{
					type: 'input',
					key: 'id',
					name: 'id',
					label: '商品方案ID',
				},
				{
					type: 'input',
					key: 'commodityName',
					name: 'commodityName',
					label: '商品方案名称',
				},
				{
					type: 'select',
					key: 'brandId',
					name: 'brandId',
					label: '品牌/车系/车型',
					title: 'text',
					items: carTypeList.map((item: any) => ({
						value: item.id,
						text: item.fullName,
					})),
				},
			],
		},
		{
			type: 'group',
			key: 'group2',
			groupItems: [
				{
					type: 'select',
					key: 'rentTypeId',
					name: 'rentTypeId',
					label: '订单类型',
					title: 'text',
					items: orderType.map((item: any) => ({
						value: item.code,
						text: item.name,
					})),
				},
				{},
				{},
			],
		},
	]

	const Cloums: any[] = [
		{title: '商品方案ID', dataIndex: 'id', align: 'center'},
		{title: '商品方案名称', dataIndex: 'commodityName', align: 'center'},
		{title: '品牌/车系/车型 ', dataIndex: 'brandInfo', align: 'center'},
		{title: '星级', dataIndex: 'carStar', align: 'center'},
		{title: '订单类型', dataIndex: 'rentTypeName', align: 'center'},
		{title: '定金', dataIndex: 'depositAmount', align: 'center'},
		{title: '押金', dataIndex: 'mortgageAmount', align: 'center'},
		{title: '租期', dataIndex: 'leaseTerm', align: 'center'},
		{title: '月租金-新签', dataIndex: 'rentAmount', align: 'center'},
		{title: '月租金-续签', dataIndex: 'renewRentAmount', align: 'center'},
		{title: '首付款', dataIndex: 'advancePaymentAmount', align: 'center'},
		{title: '尾款', dataIndex: 'balancePaymentAmount', align: 'center'},
		{title: '状态', dataIndex: 'auditStatus', align: 'center'},
	]

	const [listData, setListData] = useState([])
	const [formData, setFormData] = useState({})

	const getData = async (params?: any, query?: any) => {
		setLoading(true)
		const newP = {
			commodityName: params?.commodityName || '',
			brandId: params?.brandId || '',
			rentTypeId: params?.rentTypeId || '',
		}
		const pages = query || {current: 1, size: 10}
		const res = await commodityList({
			query: {...pages, descs: 'update_time'},
			commoditySchemeVO: {...newP},
		})
		if (res.success) {
			setListData(res.data.records)
			setTotal(res.data.total)
		}
		// if (res1.data) {
		// 	const data2 = {
		// 		// idsList: params?.carId || (res1.data || []).join(','),
		// 		idsList: (res1.data || [])
		// 			.filter((item: any) => item !== params?.carId)
		// 			.join(','),
		// 		...obj,
		// 	}
		// const res2 = await getOutCarPage(data2)
		// if (res2.data.total) {
		// 	setTotal(res2.data.total)
		// } else {
		// 	setTotal(0)
		// }
		// if (res2.data?.records?.length) {
		// 	const list: any = []
		// 	res2.data.records.forEach(async (item: any) => {
		// 		const NewItem = item
		// 		const res3 = await getDriverbyCarId({carId: item.carId})
		// 		if (res3.data) {
		// 			NewItem.driverId = res3.data.driverId
		// 			NewItem.name = res3.data.name
		// 			NewItem.tel = res3.data.tel
		// 		}
		// 		list.push(NewItem)
		// 		if (list.length === res2.data.records.length) {
		// 			setListData(list)
		// 			setTimeout(() => {
		// 				setLoading(false)
		// 			}, 0)
		// 		}
		// 	})
		// } else {
		// 	setListData([])
		setLoading(false)
		// }
	}

	// setTimeout(() => {
	//   setLoading(false);
	//   const arr = [];
	//   // eslint-disable-next-line no-plusplus
	//   for (let index = 0; index < 10; index++) {
	//     arr.push({ id: Math.random() });
	//   }
	//   setDataList([...arr]);
	//   setTotal(33);
	// }, 3000);

	const paginationChange = (current: number, size: number) => {
		setPagination({
			current,
			size,
		})
		getData(formData, {
			current,
			size,
		})
	}
	useEffect(() => {
		if (!addModalVisivle) return
		getData()
	}, [addModalVisivle])

	const onSave = async () => {
		setSaveLoading(true)
		// saveCar({feetId, carIds: selectedRow.join()})
		try {
			// eslint-disable-next-line no-unused-expressions
			if (typeof callBack === 'function') {
				setTimeout(() => {
					callBack()
					setSaveLoading(false)
					setAddModalVisivle(false)
				}, 1000)
			}
			// setSelectedRow([])
		} catch (e) {
			setSaveLoading(false)
		}
	}

	return (
		<Modal
			title="关联商品方案"
			open={addModalVisivle}
			onCancel={() => {
				setAddModalVisivle(false)
			}}
			width={1900}
			onOk={onSave}
			okButtonProps={{loading: saveLoading}}
			forceRender>
			{addModalVisivle ? (
				<div className="addVehicleInfo">
					<div className="searchBox">
						<SearchForm
							formLayout={{
								labelCol: {flex: '90px'},
								wrapperCol: {flex: '1'},
							}}
							formItems={FleetFormItems}
							onReset={() => {
								getData()
							}}
							onFinish={(value) => {
								setFormData(value)
								setPagination({
									current: 1,
									size: 100,
								})
								getData(value)
							}}
						/>
					</div>
					<div className="content">
						<Table
							columns={Cloums}
							rowKey="id"
							dataSource={listData}
							loading={loading}
							rowSelection={{
								type: 'checkbox',
								selectedRowKeys: selectedRow,
								onChange: (selectedRowKeys: React.Key[]) => {
									setSelectedRow(selectedRowKeys)
								},
								// getCheckboxProps: (record: any) => ({
								// 	disabled: idArr.includes(record.carId), // Column configuration not to be checked
								// 	// name: record.name,
								// }),
							}}
							pagination={false}
							scroll={{x: 1800, y: 500}}
						/>
						<div
							style={{
								display: 'flex',
								justifyContent: 'end',
								paddingTop: '10px',
							}}>
							<Pagination
								defaultCurrent={1}
								current={pagination.current}
								total={total}
								// eslint-disable-next-line no-shadow
								showTotal={(total, range) =>
									`第  ${range[0]} - ${range[1]} 条 / 总共 ${total} 条`
								}
								showSizeChanger
								showQuickJumper
								onChange={paginationChange}
							/>
						</div>
					</div>
				</div>
			) : (
				<></>
			)}
		</Modal>
	)
}
